<!-- 
本案例实现【异步组件】

当大型项目需要很多的组件时，如果一次性加载所有的组件，会导致页面加载变慢，甚至卡顿

但实际上，某几个功能的实现并非依赖全部的组件，而是可能某几个，因此不必一次性都把所有的组件加载进来

使用异步组件实现组件加载，当需要这个组件的时候，才加载
-->
<template>
  <component :is="currentComponent"></component>
  <!-- 4. 再次点击按钮，会发现网络请求又发送了一条，此时即是组件 B，现在需要组件 B 了，组件 B 才会被加载 -->
  <button @click="toggleComponent">切换组件</button>
</template>

<script>
// 1. 导入 defineAsyncComponent，用于定义异步组件
import { defineAsyncComponent } from "vue";

import ComA from "./components/ComA.vue";
// 2. 不再直接写死默认加载 B 组件
// import ComB from "./components/ComB.vue";
// 3. 使用 defineAsyncComponent 定义异步组件
const ComB = defineAsyncComponent(
  () =>
    import("./components/ComB.vue")
)

export default {
  components: {
    ComA,
    ComB
  },
  data() {
    return {
      currentComponent: "ComA",
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === "ComA" ? "ComB" : "ComA";
    }
  }
}
</script>

<style></style>